import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import './LoadingScreen.scss';

interface LoadingScreenProps {
  onComplete: () => void;
}

const LoadingScreen: React.FC<LoadingScreenProps> = ({ onComplete }) => {
  const loadingRef = useRef<HTMLDivElement>(null);
  const progressRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const tl = gsap.timeline({
      onComplete: () => {
        setTimeout(onComplete, 500);
      }
    });

    // 进度条动画
    tl.to(progressRef.current, {
      width: '100%',
      duration: 2,
      ease: 'power2.out'
    })
    // 文字淡出
    .to(textRef.current, {
      opacity: 0,
      duration: 0.5
    }, '-=0.5')
    // 整个加载屏幕向上移动消失
    .to(loadingRef.current, {
      y: '-100%',
      duration: 1,
      ease: 'power2.inOut'
    });

    return () => {
      tl.kill();
    };
  }, [onComplete]);

  return (
    <div ref={loadingRef} className="loading-screen">
      <div className="loading-content">
        <div ref={textRef} className="loading-text">
          <h2>风光摄影</h2>
          <p>正在加载精彩内容...</p>
        </div>
        <div className="loading-bar">
          <div ref={progressRef} className="loading-progress"></div>
        </div>
      </div>
    </div>
  );
};

export default LoadingScreen;